import React, { useState } from 'react';
import { Result, Tooltip, Table, Radio } from 'antd';
import { IconFont } from '../../../../components/IconFont';
import { IS_SYSTEM } from '../../../../utils/constant';
export default function(props) {
  const [type, setType] = useState('strategy');

  return (
    <>
      <div className='strategy-operater-content'>
        <Result
          icon={<IconFont type='iconsuccess-' style={{ fontSize: '42px', fontWeight: 'normal' }} />}
          title='导入成功，审核通过后生效'
          subTitle={`本次共导入${props.data.strategy_count}条策略  ${props.data.field_count}个字段 ${props.data.feature_count}个指标 ${props.data.event_count}个事件`}
        />
        <Radio.Group onChange={e => setType(e.target.value)} value={type} style={{ marginBottom: 8 }}>
          {props.data.strategy && props.data.strategy.length > 0 && <Radio.Button value='strategy'>策略</Radio.Button>}
          {props.data.field && props.data.field.length > 0 && <Radio.Button value='field'>字段</Radio.Button>}
          {props.data.feature && props.data.feature.length > 0 && <Radio.Button value='feature'>指标</Radio.Button>}
          {props.data.event && props.data.event.length > 0 && <Radio.Button value='event'>事件</Radio.Button>}
        </Radio.Group>
        {type === 'strategy' && (
          <Table
            className='strategy-operater-table fixed'
            dataSource={props.data.strategy}
            columns={[
              {
                title: '序号',
                render: (text, record, index) => {
                  return <>{index + 1}</>;
                }
              },
              {
                title: '策略名称',
                key: 'name',
                dataIndex: 'name',
                width: 200,
                render: (text, record) => {
                  return (
                    <Tooltip title={text} placement='topLeft'>
                      {text}
                    </Tooltip>
                  );
                }
              },

              {
                title: '优先级',
                key: 'prior',
                dataIndex: 'prior'
              },
              {
                title: '描述',
                key: 'remark',
                dataIndex: 'remark'
              },
              {
                title: '导入状态',
                render: (text, record) => {
                  return '已导入';
                }
              }
            ]}
            rowKey='strategy_id'
            pagination={false}
          />
        )}
        {type === 'field' && (
          <Table
            className='strategy-operater-table fixed'
            dataSource={props.data.field}
            columns={[
              {
                title: '序号',
                render: (text, record, index) => {
                  return <>{index + 1}</>;
                }
              },
              {
                title: '字段名',
                key: 'field_name',
                dataIndex: 'field_name',
                ellipsis: true,
                width: 200,
                render: (text, record) => {
                  return (
                    <Tooltip title={text} placement='topLeft'>
                      {text}
                    </Tooltip>
                  );
                }
              },

              {
                title: '字段类型',
                key: 'is_system',
                dataIndex: 'is_system',
                ellipsis: true,
                render: (text, record) => {
                  return (
                    <>
                      {record.is_system === IS_SYSTEM._TRUE && <span>系统字段</span>}
                      {record.is_system === IS_SYSTEM._FALSE && <span>自定义字段</span>}
                    </>
                  );
                }
              },
              {
                title: '字段Code',
                key: 'field_code',
                dataIndex: 'field_code',
                ellipsis: true
              },
              {
                title: '数据类型',
                key: 'data_type',
                dataIndex: 'data_type',
                ellipsis: true
              },
              {
                title: '最大长度',
                key: 'remark',
                dataIndex: 'remark',
                ellipsis: true
              },
              {
                title: '描述',
                key: 'remark',
                dataIndex: 'remark',
                ellipsis: true
              },
              {
                title: '导入状态',
                render: (text, record) => {
                  return '已导入';
                }
              }
            ]}
            rowKey='field_id'
            pagination={false}
          />
        )}
        {type === 'feature' && (
          <Table
            className='strategy-operater-table fixed'
            dataSource={props.data.feature}
            columns={[
              {
                title: '序号',
                render: (text, record, index) => {
                  return <>{index + 1}</>;
                }
              },
              {
                title: '指标名称',
                key: 'feature_name',
                dataIndex: 'feature_name',
                ellipsis: true,
                width: 150
              },
              {
                title: '描述',
                key: 'remark',
                dataIndex: 'remark',
                ellipsis: true
              },
              {
                title: '导入状态',
                render: (text, record) => {
                  return '已导入';
                }
              }
            ]}
            rowKey='feature_id'
            pagination={false}
          />
        )}
        {type === 'event' && (
          <Table
            className='strategy-operater-table fixed'
            dataSource={props.data.event}
            columns={[
              {
                title: '序号',
                render: (text, record, index) => {
                  return <>{index + 1}</>;
                }
              },
              {
                title: '事件名',
                key: 'event_name',
                dataIndex: 'event_name',
                ellipsis: true,
                width: 150
              },
              {
                title: '描述',
                key: 'remark',
                dataIndex: 'remark',
                ellipsis: true
              }
            ]}
            rowKey='event_id'
            pagination={false}
          />
        )}
      </div>
      <div className='strategy-operater-ft'></div>
    </>
  );
}
